<template>
  <div class="menu">
    <div class="menu-left">
      <ul>
        <li
          class="menu-item"
          v-for="(item, index) in menus"
          :key="index"
          @click="clickList(index)"
          :class="{ current: index === currentIndex }"
        >
          <p class="text">{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <!-- 给这个大盒子  取一个名字 叫 itemList -->
    <div class="menu-right" ref="itemList">
      <ul>
        <li class="cate" v-for="(menu, index1) in menus" :key="index1">
          <h4 class="cate-title">{{ menu.name }}</h4>
          <ul class="cate-item">
            <!-- 传值 -->
            <li v-for="(item, index2) in menu.sub" :key="index2">
              <router-link
                :to="'/goodslist/' + item.id"
                class="cate-item-wrapper"
              >
                <div class="cate-item-img">
                  <img :src="item.image" alt="" />
                </div>
                <span>{{ item.name }}</span>
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 实现滚动效果的插件
import BScroll from "better-scroll";
export default {
  name: "category",
  data() {
    return {
      menus: [],
      // 记录用户点击的索引项
      currentIndex: 0,
      rightLiTops: [],
    };
  },
  created() {
    this.getMenu();
  },
  mounted() {},
  methods: {
    getMenu() {
      this.$indicator.open({
        //做一个loading的提示
        text: "加载中...",
      });
      // 发送请求获取分类信息
      this.$http
        .get("category")
        .then((res) => {
          // console.log(res.data);
          this.$indicator.close();
          this.menus = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clickList(index) {
      this.currentIndex = index;
      const y = -this.rightLiTops[index]; //找到index 索引的 偏移值
      // console.log(y);
      // 根据索引去定位右侧盒子的 定位置
      this.rightBScroll.scrollTo(0, y); //让我们右边的盒子向下平移100像素
    },
    _initBScroll() {
      this.leftBScroll = new BScroll(".menu-left", {
        click: true, //你可以点击
        mouseWheel: true, //你可以进行鼠标中轮的滚动
      });
      this.rightBScroll = new BScroll(".menu-right", {
        click: true, //你可以点击
        mouseWheel: true, //你可以进行鼠标中轮的滚动
        probeType: 3, //同时监听 中轮滚动  鼠标滚动
      });
      // 监听二级分类滚动区域的滚动事件
      this.rightBScroll.on("scroll", (post) => {
        //每一次滚动就触发该方法
        //post表示当前位置是一个(x,y)的坐标
        // console.log(post);
        let scrollY = Math.abs(post.y); // 因为滚下去的 Y值是负值所以要加绝对值
        for (var i = 0; i < this.rightLiTops.length - 1; i++) {
          // 判断滚动的一个Y值
          if (
            scrollY >= this.rightLiTops[i] &&
            scrollY < this.rightLiTops[i + 1]
          ) {
            this.currentIndex = i;
          }
        }
      });
    },
    _initRightHeight() {
      const itemArray = [];
      let top = 0;
      // 将我们第一个二级分类的定位置 的值 加入到数组中
      itemArray.push(top);
      // 获取所有 二级分类盒子
      //this.$refs.itemList找到了 叫div 里面itemList的盒子
      const allList = this.$refs.itemList.getElementsByClassName("cate");
      for (var i = 0; i < allList.length; i++) {
        top += allList[i].clientHeight; //clientHeight盒子的高度
        itemArray.push(top);
      }
      this.rightLiTops = itemArray;
    },
  },
  watch: {
    menus() {
      // this.$nextTick() 函数会在页面渲染完成之后进行调用
      this.$nextTick(() => {
        this._initBScroll();
        this._initRightHeight();
      }); //初始化
    },
  },
};
</script>
 <style lang="scss" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.menu {
  display: flex;
  position: absolute;
  text-align: center;
  top: 40px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
  .menu-left {
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;
    .menu-item {
      height: 54px;
      width: 100%;
      .text {
        width: 100%;
        line-height: 54px;
        margin-bottom: 0;
      }
    }
    .current {
      width: 100%;
      background: #fff;
      .text {
        color: red;
      }
    }
  }
  .menu-right {
    flex: 1;
    background: #fff;
    .cate {
      height: 100%;
      .cate-title {
        margin: 0;
        text-align: left;
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding: 10px;
      }
      .cate-item {
        padding: 7px 10px 10px;
        display: flex;
        overflow: hidden;
        flex-flow: row wrap;
        li {
          width: 33.3%;
          .cate-item-wrapper {
            .cate-item-img {
              width: 100%;
              img {
                width: 70px;
                height: 70px;
              }
            }
            span {
              display: inline-block;
              font-size: 14px;
              color: #333;
            }
          }
        }
      }
    }
  }
}
</style>
